@use 'sass:map';

@use '@/assets/styles/common/var.scss' as *;
@use '@/assets/styles/mixins/_button.scss' as *;
@use '@/assets/styles/mixins/mixins.scss' as *;
@use '@/assets/styles/mixins/utils.scss' as *;
@use '@/assets/styles/mixins/_var.scss' as *;

@include b(upload) {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);

    .item {
        position: relative;
        width: 172px;
        height: 172px;
        display: flex;
        box-sizing: border-box;
        border: 1px solid $tts-bg-placeholder;
        align-items: center;
        justify-content: center;
        background: $tts-bg-placeholder;
        color: $tts-text-assist;
        border-radius: 10px;
        overflow: hidden;

        .await {
            z-index: 7;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .media-image {
            position: relative;
            width: 100%;
            height: 100%;
        }
    }
}

